<template>
	<a-card :bordered="false" :body-style="{ 'padding-bottom': '0px' }" class="mb-2">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="4">
					<a-form-item label="试剂名称" name="goodsName">
						<a-input v-model:value.trim="searchFormState.goodsName" placeholder="请输入试剂名称" allowClear></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="CAS编号" name="casNo">
						<a-input v-model:value.trim="searchFormState.casNo" placeholder="请输入CAS编号" allowClear></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="试剂状态" name="state">
						<a-select v-model:value="searchFormState.state" placeholder="请选择状态" allowClear>
							<a-select-option value="0">已报废</a-select-option>
							<a-select-option value="1">启用</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>

				<a-col :span="4">
					<a-form-item label="存放柜组" name="bioCabinetGroupId">
						<a-select
							v-model:value="searchFormState.bioCabinetGroupId"
							:options="bioCabinetGroupOptions"
							placeholder="请选择存放柜组"
							allow-clear
							@change="onChangeBioCabGropu"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="存放柜子" name="bioCabinetId">
						<a-select
							v-model:value="searchFormState.bioCabinetId"
							:options="bioCabinetOptions"
							placeholder="请选择存放柜子"
							allow-clear
							@change="onChangeBioCab"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="存放柜门" name="bioCabinetDoorId">
						<a-select
							v-model:value="searchFormState.bioCabinetDoorId"
							:options="bioCabinetDoorOptions"
							placeholder="请选择存放柜门"
							allow-clear
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="当前柜组" name="curCabinetGroupId">
						<a-select
							v-model:value="searchFormState.curCabinetGroupId"
							:options="curCabinetGroupOptions"
							placeholder="请选择当前柜组"
							allow-clear
							@change="onChangeCurCabGropu"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="当前柜子" name="curCabinetId">
						<a-select
							v-model:value="searchFormState.curCabinetId"
							:options="curCabinetOptions"
							placeholder="请选择当前柜子"
							allow-clear
							@change="onChangeCurCab"
						></a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="当前柜门" name="curCabinetDoorId">
						<a-select
							v-model:value="searchFormState.curCabinetDoorId"
							:options="curCabinetDoorOptions"
							placeholder="请选择当前柜门"
							allow-clear
						></a-select>
					</a-form-item>
				</a-col>

				<a-col :span="4">
					<a-form-item label="新增用户" name="createUser">
						<a-input v-model:value.trim="searchFormState.createUser" placeholder="请输入用户名称/账号"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="试剂存放是否一致" name="consistentStorage">
						<a-select v-model:value="searchFormState.consistentStorage" placeholder="请选择" allowClear>
							<a-select-option value="1">否</a-select-option>
							<a-select-option value="0">是</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="试剂是否在柜" name="leaveFlag">
						<a-select v-model:value="searchFormState.leaveFlag" placeholder="请选择" allowClear>
							<a-select-option value="0">在柜</a-select-option>
							<a-select-option value="1">离柜</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="试剂ID" name="goodsId">
						<a-input v-model:value.trim="searchFormState.goodsId" placeholder="请输入试剂ID"></a-input>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-form-item label="入库状态" name="state">
						<a-select v-model:value="searchFormState.enterFlag" placeholder="请选择状态" allowClear>
							<a-select-option value="0">未入库</a-select-option>
							<a-select-option value="1">已入库</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-button type="primary" @click="table.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="resetForm()">重置</a-button>
					<a-button style="margin: 0 8px" type="primary" ghost @click="exportGoods()" :loading="exportLoading">导出</a-button>
					<a-button type="primary" ghost @click="reagentImportRef.onOpen()">导入试剂</a-button>
				</a-col>
				<a-col :span="8">
					<div style="cursor: pointer;float: right" @click="tablePrint()"><svg t="1716796772470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2654" width="40" height="40"><path d="M928 288H96v384h160v224h512V672h160zM704 832H320V544h384z m160-224h-96v-128H256v128h-96V352h704zM320 192h384v64h64V128H256v128h64v-64z" fill="#333333" p-id="2655"></path><path d="M384 608h256v64H384zM384 704h256v64H384z" fill="#333333" p-id="2656"></path><path d="M800 416m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" fill="#333333" p-id="2657"></path></svg></div>

				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false">
		<s-table
			id="printTable"
			ref="table"
			:columns="columns"
			:data="loadData"
			:alert="options.alert.show"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:row-selection="options.rowSelection"
		>
			<template #operator class="table-operator">
				<a-space>
					<a-button type="primary" @click="reagentClassModalRef.onOpen()">
						<template #icon>
							<plus-outlined/>
						</template>
						新增
					</a-button>
					<a-popconfirm title="更改试剂存放柜门为当前柜门吗？" @confirm="changeCabinet()">
						<a-button type="primary">存放柜门改为当前柜门</a-button>
					</a-popconfirm>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'bioCabinetDoorName'">
					{{record.bioCabinetName}}-{{record.bioCabinetDoorName}}
				</template>
				<template v-if="column.dataIndex === 'curCabinetDoorName'">
					{{record.curCabinetName}}-{{record.curCabinetDoorName}}
				</template>
				<template v-if="column.dataIndex === 'goodsName'">
					<a-space>
						<a-tag v-if="record.unknownFlag === 1" color="red">未知</a-tag>
						<span v-else>{{ record.goodsName }}</span>
					</a-space>
				</template>
				<template v-if="column.dataIndex === 'leaveFlag'">
					<a-space>
						<a-tag v-if="record.leaveFlag === 0" color="green">在柜</a-tag>
						<a-tag v-if="record.leaveFlag === 1" color="red">离柜</a-tag>
					</a-space>
				</template>
				<template v-if="column.dataIndex === 'recognizeMethod'">
					<a-space>
						<a-tag v-if="record.rfidFlag === 1" color="purple" @click="recognizeMethodRef.onOpen(record)">
							RFID
						</a-tag>
						<a-tag v-if="record.qrcodeFlag === 1" color="cyan" @click="recognizeMethodRef.onOpen(record)">
							二维码
						</a-tag>
						<a-tag v-if="record.barcodeFlag === 1" color="blue" @click="recognizeMethodRef.onOpen(record)">
							条形码
						</a-tag>
					</a-space>
				</template>
				<template v-if="column.dataIndex === 'state'">
					<a-space>
						<a-tag v-if="record.state === 0" color="red">已报废</a-tag>
						<a-tag v-if="record.state === 1" color="green">启用</a-tag>
					</a-space>
				</template>
				<template v-if="column.dataIndex === 'handleExcCount'">
					<a-tag v-if="record.handleExcCount > 0" color="red" @click="jumpEventForExc(record.id)">
						{{record.handleExcCount}}
					</a-tag>
					<a-tag color="green" v-else>
						无
					</a-tag>
				</template>
				<template v-if="column.dataIndex === 'createUser'">
					<span v-if="record.createUserName">{{record.createUserName}}({{record.createUserAccount}})</span>
				</template>
				<template v-if="column.dataIndex === 'enterFlag'">
					<a-space>
						<a-tag v-if="record.enterFlag === 0" color="red">未入库</a-tag>
						<a-tag v-if="record.enterFlag === 1" color="green">已入库</a-tag>
					</a-space>
				</template>
				<template v-if="column.dataIndex === 'action'">
					<a-tooltip :title="record.reagentMsds">
						<a>MSDS</a>
					</a-tooltip>
					<a-divider type="vertical"/>
					<a @click="jumpLedger(record.id)">台账记录</a>
					<a-divider type="vertical"/>
					<a @click="jumpEvent(record.id)">事件记录</a>
					<a-divider type="vertical"/>
					<a-space v-if="record.state === 0">
						<a-dropdown>
							<a class="ant-dropdown-link">
								更多
								<DownOutlined/>
							</a>
							<template #overlay>
								<a-menu>
									<a-menu-item>
										<a-popconfirm title="确定删除此试剂吗？" @confirm="deleteGoods(record.id)">
											<a>删除</a>
										</a-popconfirm>
									</a-menu-item>
									<a-menu-item><a @click="scrapRef.onOpen(record)">报废意见</a></a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</a-space>
					<a-space v-if="record.state === 1">
						<a-dropdown>
							<a class="ant-dropdown-link">
								更多
								<DownOutlined/>
							</a>
							<template #overlay>
								<a-menu>
									<a-menu-item><a @click="scrapRef.onOpen(record)">报废处理</a></a-menu-item>
									<a-menu-item><a @click="reagentForm.onOpen(record,'edit')">编辑</a></a-menu-item>
								</a-menu>
							</template>
						</a-dropdown>
					</a-space>
				</template>
			</template>
		</s-table>
	</a-card>
	<ReagentForm ref="reagentForm" @successful="onSuccess"/>
	<Scrap ref="scrapRef" @successful="scrapDone()"/>
	<Reagent-Class-Modal ref="reagentClassModalRef" @chooseReagentClass="chooseReagentClass"/>
	<Recognize-Method ref="recognizeMethodRef"/>
	<ReagentImport ref="reagentImportRef"/>
</template>
<!--<style>-->
<!--/* 打印样式 */-->
<!--@media print {-->
<!--	body * {-->
<!--		visibility: hidden; /* 隐藏所有内容 */-->
<!--	}-->
<!--	#printTable, #printTable * {-->
<!--		visibility: visible; /* 只显示表格部分 */-->
<!--	}-->
<!--	#printTable {-->
<!--		position: absolute;-->
<!--		left: 0;-->
<!--		top: 0;-->
<!--	}-->
<!--}-->
<!--</style>-->
<script setup name="reagent">
	import { watchEffect } from 'vue'
	import { message } from 'ant-design-vue'
	import bizGoodsApi from '@/api/biz/bizGoodsApi'
	import RecognizeMethod from './recognizeMethod.vue'
	import Scrap from './scrap.vue'
	import { useRoute } from 'vue-router'
	import ReagentClassModal from './reagentClassModal.vue'
	import ReagentForm from './reagentForm.vue'
	import { useRouter } from 'vue-router'
	import bizCabinetGroupReagentApi from '@/api/biz/bizCabinetGroupReagentApi'
	import bizCabinetInfoReagentApi from '@/api/biz/bizCabinetInfoReagentApi'
	import bizCabinetDoorReagentApi from '@/api/biz/bizCabinetDoorReagentApi'
	import ReagentImport from './reagentImport.vue'


	let searchFormState = reactive({
		goodsType: 1
	})
	const table = ref()
	const reagentForm = ref()
	const reagentClassModalRef = ref()
	const scrapRef = ref()
	const reagentImportRef = ref()
	const recognizeMethodRef = ref()
	const searchFormRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	//存放柜组
	const bioCabinetGroupOptions = ref([])
	//存放柜子
	const bioCabinetOptions = ref([])
	//存放柜门
	const bioCabinetDoorOptions = ref([])
	//当前柜组
	const curCabinetGroupOptions = ref([])
	//当前柜子
	const curCabinetOptions = ref([])
	//当前柜门
	const curCabinetDoorOptions = ref([])
	//路由
	const router = useRouter()
	//导出loading
	const exportLoading = ref(false)



	const columns = [
		{
			title: '试剂ID',
			dataIndex: 'id'
		},
		{
			title: '试剂名称',
			dataIndex: 'goodsName'
		},
		{
			title: 'CAS编码',
			dataIndex: 'reagentCasNo'
		},
		{
			title: '存放柜门',
			dataIndex: 'bioCabinetDoorName'
		},
		{
			title: '存放地点',
			dataIndex: 'bioCabinetLoationName'
		},
		{
			title: '当前柜门',
			dataIndex: 'curCabinetDoorName'
		},
		{
			title: '当前柜地点',
			dataIndex: 'curCabinetLoationName'
		},
		{
			title: '当前量(g)',
			dataIndex: 'reagentAvlWeight'
		},
		{
			title: '当前量(ml)',
			dataIndex: 'reagentAvlVolume'
		},
		{
			title: '是否在柜',
			dataIndex: 'leaveFlag'
		},
		{
			title: '识别方式',
			dataIndex: 'recognizeMethod'
		},
		{
			title: '待处理异常',
			dataIndex: 'handleExcCount'
		},
		{
			title: '新增用户',
			dataIndex: 'createUser'
		},
		{
			title: '状态',
			dataIndex: 'state'
		},
		{
			title: '入库情况',
			dataIndex: 'enterFlag'
		}
	]
	// 操作栏通过权限判断是否显示
	columns.push({
		title: '操作',
		dataIndex: 'action',
		align: 'center',
		width: '150px'
	})
	let selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		alert: {
			show: false,
			clear: () => {
				selectedRowKeys = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		return bizGoodsApi.bizGoodsPage(Object.assign(parameter, searchFormState)).then((data) => {
			return data
		})
	}

	bizCabinetGroupReagentApi.bizCabinetGroupList({}).then((res) => {
		bioCabinetGroupOptions.value = res.map((item) => {
			return {
				label: `${item.cabinetGroupName}-${item.cabinetGroupCode}`,
				value: item.id
			}
		})
		curCabinetGroupOptions.value = res.map((item) => {
			return {
				label: `${item.cabinetGroupName}-${item.cabinetGroupCode}`,
				value: item.id
			}
		})
	})

	bizCabinetInfoReagentApi.bizCabinetList({}).then((res) => {
		bioCabinetOptions.value = res.map((item) => {
			return {
				label: `${item.cabinetName}`,
				value: item.id
			}
		})
		curCabinetOptions.value = res.map((item) => {
			return {
				label: `${item.cabinetName}`,
				value: item.id
			}
		})
	})

	bizCabinetDoorReagentApi.bizCabinetDoorList({}).then((res) => {
		bioCabinetDoorOptions.value = res.map((item) => {
			return {
				label: `${item.cabinetDoorName}`,
				value: item.id
			}
		})
		curCabinetDoorOptions.value = res.map((item) => {
			return {
				label: `${item.cabinetDoorName}`,
				value: item.id
			}
		})
	})

	//存放柜组切换
	const onChangeBioCabGropu = (value) => {
		searchFormState.bioCabinetId = undefined
		searchFormState.bioCabinetDoorId = undefined
		bioCabinetOptions.value = []
		bioCabinetDoorOptions.value = []
		bizCabinetInfoReagentApi.bizCabinetList({ groupId: value }).then((res) => {
			bioCabinetOptions.value = res.map((item) => {
				return {
					label: `${item.cabinetName}`,
					value: item.id
				}
			})
		})
	}

	//存放柜子切换
	const onChangeBioCab = (value) => {
		searchFormState.bioCabinetDoorId = undefined
		bioCabinetDoorOptions.value = []
		bizCabinetDoorReagentApi.bizCabinetDoorList({ cabinetInfoId: value }).then((res) => {
			bioCabinetDoorOptions.value = res.map((item) => {
				return {
					label: `${item.cabinetDoorName}`,
					value: item.id
				}
			})
		})
	}

	//当前柜组切换
	const onChangeCurCabGropu = (value) => {
		searchFormState.curCabinetId = undefined
		searchFormState.curCabinetDoorId = undefined
		curCabinetOptions.value = []
		curCabinetDoorOptions.value = []
		bizCabinetInfoReagentApi.bizCabinetList({ groupId: value }).then((res) => {
			curCabinetOptions.value = res.map((item) => {
				return {
					label: `${item.cabinetName}`,
					value: item.id
				}
			})
		})
	}

	//当前柜子切换
	const onChangeCurCab = (value) => {
		searchFormState.curCabinetDoorId = undefined
		curCabinetDoorOptions.value = []
		bizCabinetDoorReagentApi.bizCabinetDoorList({ cabinetInfoId: value }).then((res) => {
			curCabinetDoorOptions.value = res.map((item) => {
				return {
					label: `${item.cabinetDoorName}`,
					value: item.id
				}
			})
		})
	}

	// 存放柜门改为当前柜门
	const changeCabinet = () => {
		if (selectedRowKeys.value.length < 1) {
			message.warning('请选择一条或多条数据')
			return false
		}
		const params = selectedRowKeys.value.map((m) => {
			return {
				id: m
			}
		})
		bizGoodsApi.bizGoodsChangeCabinet(params).then(() => {
			message.success('更改成功')
			table.value.clearRefreshSelected()
		})
	}
	// 删除
	const deleteGoods = (id) => {
		bizGoodsApi
			.bizGoodsDelete({
				id: id
			})
			.then(() => {
				message.success('删除成功')
				table.value.clearRefreshSelected()
			})
	}
	//启用
	const enableGoods = (id) => {
		bizGoodsApi
			.bizGoodsEnable({
				id: id
			})
			.then(() => {
				message.success('启用成功')
				table.value.clearRefreshSelected()
			})
	}

	//维修
	const repairGoods = (id) => {
		bizGoodsApi
			.bizGoodsRepair({
				id: id
			})
			.then(() => {
				message.success('申请维修成功')
				table.value.clearRefreshSelected()
			})
	}
	//跳转到台账
	const jumpLedger = (id) => {
		router.replace({
			name: 'bizReagentledger',
			params: {
				goodsId: id
			}
		})
	}
	//打印
	const tablePrint = () => {
		// window.print();
		router.replace({
			name: 'biz-goods-reagent-print'
		})
	}

	//跳转到事件
	const jumpEvent = (id) => {
		router.replace({
			name: 'bizReagentEvent',
			params: {
				goodsId: id
			}
		})
	}
	//跳转到时间
	const jumpEventForExc = (id) => {
		router.replace({
			name: 'bizReagentEvent',
			params: {
				goodsId: id,
				procStatus: 0,
				abnFlag: 1
			}
		})
	}

	const scrapDone = () => {
		message.success('报废处理成功')
		table.value.refresh(true)
	}

	const exportGoods = () => {
		exportLoading.value = true
		bizGoodsApi.bizReagentExport(searchFormState).then((res) => {
			const blob = new Blob([res.data], { type: 'application/octet-stream;charset=UTF-8' });
			const contentDisposition = res.headers['content-disposition']
			const patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
			const $link = document.createElement("a");
			$link.href = URL.createObjectURL(blob);
			var reg = /^["](.*)["]$/g
			$link.download = decodeURI(patt.exec(contentDisposition)[1].replace(reg, '$1'))
			$link.click();
			document.body.appendChild($link);
			document.body.removeChild($link); // 下载完成移除元素
			window.URL.revokeObjectURL($link.href); // 释放掉blob对象
		}).finally(() => {
			exportLoading.value = false
		})
	}

	const chooseReagentClass = (data) => {
		reagentForm.value.onOpen(data,'add')
	}

	watch(
		() => router.currentRoute.value,
		(newValue, oldValue) => {
			if (newValue.name === 'bizReagent') {
				let params = newValue.params
				console.log('params=', params)
				let cabinetGroupId = params.cabinetGroupId
				if (cabinetGroupId && cabinetGroupId !== searchFormState.bioCabinetGroupId) {
					searchFormState.bioCabinetGroupId = cabinetGroupId
					searchFormState.bioCabinetId = null
					searchFormState.bioCabinetDoorId = null
					// 加载数据
					if (table.value) {
						table.value.refresh(true)
					}
				}

				let cabinetId = params.cabinetId
				if (cabinetId && cabinetId !== searchFormState.bioCabinetId) {
					searchFormState.bioCabinetGroupId = null
					searchFormState.bioCabinetId = cabinetId
					searchFormState.bioCabinetDoorId = null

					// 加载数据
					if (table.value) {
						table.value.refresh(true)
					}
				}

				let cabinetDoorId = params.cabinetDoorId
				if (cabinetDoorId && cabinetDoorId !== searchFormState.bioCabinetDoorId) {
					searchFormState.bioCabinetGroupId = null
					searchFormState.bioCabinetId = null
					searchFormState.bioCabinetDoorId = cabinetDoorId

					// 加载数据
					if (table.value) {
						table.value.refresh(true)
					}
				}
			}
		},
		{
			immediate: true
		}
	)

	const resetForm = () => {
		searchFormRef.value.resetFields()
		searchFormState.bioCabinetGroupId = null
		searchFormState.bioCabinetId = null
		searchFormState.bioCabinetDoorId = null
		searchFormState.curCabinetGroupId = null
		searchFormState.curCabinetId = null
		searchFormState.curCabinetDoorId = null
		table.value.refresh(true)
	}

	const onSuccess = () => {
		table.value.refresh(true)
		message.success('保存成功')
	}


</script>
